<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		{% load static %}
		<link rel="stylesheet" href="{% static 'news/css/shouye.css' %}">
		{% load news_filter %}
		
	</head>
	<body>
		<div id="head"  style="width:1692px; height:72px; background:black; position:relative;">
			 <div style="position: absolute; left: 155px; top: 20px;">
                <img src="{% static 'news/images/logo.png' %}">
            </div>
			{% if user %}
				<div id="head_1" style="top:20px;"><a href="{% url 'news:publish_content' %}">发布内容</a></div>
				<a href="{% url 'news:user_index' %}"><img src="{% static user.portrait.url %}" id="head_2" style="top:-10px; border-radius: 50%;"></a>
				{% else %}
				<p id="head_0"><a href="{% url 'news:user_login' %}" id="a1">登录 |</a>
				<a href="{% url 'news:user_register' %}" id="a2">注册</a></p>
			{% endif %}
		</div>
		<div id="lun">
			{% for i in news_flash %}
			<a href="{% url 'news:article_detail' i.id %}"><img src="{% static i.images.url %}" class="l"></a>
			{% endfor %}
			<span class="lu"></span>
			<span class="lu"></span>
			<span class="lu"></span>
			<span class="lu"></span>
		</div>
		<div id="d1">
			<a href="https://weixin.qq.com/"><img src="{% static 'news/images/1234.jpg'%}" class="wx"></a>
		</div>
		<div id="d2">
			<a href="https://www.alipay.com/"><img src="{% static 'news/images/11111.png' %}" class="wx"></a>
		</div>
		<div id="d3">
			<h4 id="h1">快讯</h4>
			<ul id="ul_1">
				{% for news in news_flash %}
				<li id="li_1">
					<img src="{% static 'news/images/b_n.png' %}" class="triangle_left">
					<img src="{% static 'news/images/b_s.png' %}" class="triangle_top">
					<a href="{% url 'news:article_detail' news.id %}"><p class="p1">{{news.title}}</p>	</a>
				</li>
				<div class="news">
					<p class="p1_1">{{article.abstract}}</p>
					<span class="sp1">{{article.ago_time}}</span>
					<span class="sp2"><img src="{% static 'news/images/yan.png' %}" alt="">{{article.view_number}}</span>
					<span class="sp3"><img src="{% static 'news/images/k_03.png' %}" >{{article.share_number}}</span>
				</div>
				{% endfor %}
				<a href="{% url 'news:mores' %}" id="more"><span>查看更多</span></a>
			</ul>
			</div>
		<div id="d4">
			<ul id="news_class">
				<li class="news_cl news_cl_1">新闻</li>
				<li class="news_cl">政策</li>
				<li class="news_cl">行情</li>
				<li class="news_cl">技术</li>
			</ul>
		</div>
		<ul class="ul_3">
			<div class="dd5 ">
				{% for i in news_news %}
				<a href="{% url 'news:article_detail' i.id%}">
					<li class="d5">
					<img src="{% static i.images.url %}" class="d5_img">
					<strong class="news_titles">{{i.title}}</strong>
					<p class="news_content">{{i.abstract}}</p>
					<p class="qing"><span>{{i.author.nickname}} | {{i.pub_date|date:'Y-m-d'}}</span><span class="imgst"><img src="{% static 'news/images/k_02.png' %}" class="imgst_1 gg">{{i.audit_status}} <img src="{% static 'news/images/yan.png' %}"class="imgst_2 imgst_1">{{i.view_number}}</span></p>
				</li>
				</a>
				{% endfor %}
			</div>
			
			<div class="dd5 dd6">
				{% for i in news_policy %}
				<a href="{% url 'news:article_detail' i.id%}">
					<li class="d5 d6">
						<img src="{%  static i.images.url %}" class="d5_img">
						<strong class="news_titles">{{i.title}}</strong>
						<p class="news_content">{{i.abstract}}</p>
						<p class="qing"><span>{{i.author.nickname}} | {{i.pub_date|date:'Y-m-d'}}</span><span class="imgst"><img src="{% static 'news/images/k_02.png' %}" class="imgst_1 gg">{{i.audit_status}} <img src="{% static 'news/images/yan.png' %}"class="imgst_2 imgst_1">{{i.view_number}}</span></p>
						</li>
				</a>
				
				{% endfor %}
			</div>
			
			<div class="dd5 dd6">
				{% for i in news_market %}
				<a href="{% url 'news:article_detail' i.id%}">
					<li class="d5 d6">
					<img src="{% static i.images.url %}" class="d5_img">
					<strong class="news_titles">{{i.title}}</strong>
					<p class="news_content">{{i.abstract}}</p>
					<p class="qing"><span>{{i.author.nickname}} | {{i.pub_date|date:'Y-m-d'}}</span><span class="imgst"><img src="{% static 'news/images/k_02.png' %}" class="imgst_1 gg">{{i.audit_status}} <img src="{% static 'news/images/yan.png' %}"class="imgst_2 imgst_1">{{i.view_number}}</span></p>
					</li>
				</a>
				
				{% endfor %}
			</div>
			
			<div class="dd5 dd6">
				{% for i in news_technology %}
				<a href="{% url 'news:article_detail' i.id%}">
					<li class="d5 d6">
					<img src="{% static i.images.url %}" class="d5_img">
					<strong class="news_titles">{{i.title}}</strong>
					<p class="news_content">{{i.abstract}}</p>
					<p class="qing"><span>{{i.author.nickname}} | {{i.pub_date|date:'Y-m-d'}}</span><span class="imgst"><img src="{% static 'news/images/k_02.png' %}" class="imgst_1 gg">{{i.audit_status}} <img src="{% static 'news/images/yan.png' %}"class="imgst_2 imgst_1">{{i.view_number}}</span></p>
					</li>
				</a>
				
				{% endfor %}
			</div>
			<a href="" id="mores"><span>查看更多</span></a>
		</ul>
		
		
		<div id="d6">
			<strong id="remen">热门新闻</strong>
			<img src="{% static newsr.images.url %}" alt="" id="img3">
			<div id="titles">{{newsr.title}}</div>
			{% for i in news_flash %}
			<a class="news_2" href="{% url 'news:article_detail' i.id %}">
				<img src="{% static i.images.url %}" class="img3">
				<span class="titles">{{i.title}}</span>
				<span class="times">{{i.pub_date|date:'Y-m-d'}}</span>
			</a>
			{% endfor %}
		</div>
	</body>
	<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">
		$('.lu').css({'background-color':'#A8A8A8'})
		$('.lu')[0].style.background = 'white'
		console.log($('.lu')[0])
		// 轮播
		f1(0)
		var a = 0
		function f1(a){
			
			for(var b=0; b<$('.l').length; b++){
				$('.l').hide()
				$('.lu').css({'background-color': '#A8A8A8'})
			}
			$('.l')[a].style.display = 'block';
			$('.lu')[a].style.background = 'white';
		};
		setInterval(function() {
				a++;
				if(a>3){
					a = 0
					f1(a)
				}else{
					f1(a);
				};	
			}, 1500);
		// 快讯
		$('.triangle_left').click(
			function (){
				console.log(index_1 = $('.triangle_left').index(this))
				for(var i=0; i<$('.news').length; i++){
					$('.news')[i].style.display = 'none';
					$('.triangle_top')[i].style.display = 'none';
					$('.triangle_left')[i].style.display = 'block';
				}
				$('.news')[index_1].style.display = 'block';
				$('.triangle_top')[index_1].style.display = 'block';
				$('.triangle_left')[index_1].style.display = 'none';
			}
		)
		// 新闻分类
		$('.news_cl').mouseover(function(){
			for(var i=0;i<$('.news_cl').length;i++){
				$('.dd5')[i].style.display = 'none'
				$('.news_cl')[i].style.background = 'rgba(0,0,0,0)'
			}
			$('.dd5')[$('.news_cl').index(this)].style.display = 'block';
			$('.news_cl')[$('.news_cl').index(this)].style.background = 'rgba(0,0,0,0.3)'
		})
	</script>
</html>